<template>
  <div class="typical-case-presentation">
    <div class="typical-case-presentation-item" v-for="item in caseData">
      <div class="name">{{item.name}}</div>
      <div class="desc">{{item.desc}}</div>
      <div class="label">{{item.label}}</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'TypicalCasePresentation',
  data(){
    return{
      caseData:[
        {name:'消费纠纷纠纷调查案例',desc:'2025年6月13日10:15，调解员黄亮（市场监管所）1小时内成功调解手机质量纠纷，商家同意换货并补偿1000元，亮点：\'线上取证+线下协商\'高效模式。',label:'金泉路e站特色案例'},
        {name:'消费纠纷',desc:'快速化解兔兔生鲜超市消费纠纷（涉及金额500元，2小时内达成和解）',label:'典型案例'},
        {name:'邻里纠纷调查案例',desc:'2025年6月1969内老人中午拉琴扰民，通过对老人讲解法律知识，老人保证再不到1969内扰民。',label:'金泉路e站特色案例'},
        {name:'家庭婚姻纠纷处理',desc:'瀚海明珠家庭婚姻矛盾通过警网融合，由社区民警联合网格长共同调解',label:'典型案例'},
        {name:'物业纠纷处理',desc:'碧玉佳苑物业纠纷由社区民警联合社区综治中心、市场监督管理工作人员共同调解',label:'典型案例'},
      ],
    }
  }
}
</script>
<style scoped lang="scss">
.typical-case-presentation{
  width: 100%;
  height: 100%;
  overflow: auto;
  &::-webkit-scrollbar {
    width: 4px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgba(0,198,255,.3);
  }
  &::-webkit-scrollbar-track{
    border-radius: 3px;
    background: rgba(0,24,48,.3);
  }
  .typical-case-presentation-item{
    width: 100%;
    margin-bottom: 20px;
    background: #06213B;
    border: 1px solid #32B4FF;
    padding:10px 20px;
    border-radius: 5px;
    .name{
      color:#32B4FF;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .desc{
      color: #fff;
      margin-bottom: 10px;
      font-size: 14px;
    }
    .label{
      display: inline-block;
      padding: 3px 8px;
      font-size: 14px;
      color: #32B4FF;
      background: rgba(50, 180, 255, 0.2);
      border-radius: 5px;
    }
  }
}
</style>
